<script>
  import SuPopup from '@/sheep/ui/su-popup/su-popup.vue';

  export default {
    name: 'su-select',
    components: { SuPopup },
    data() {
      return {
        indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;background:rgba(255,66,6,0.1);`,
        selectValue: [0],
      };
    },
    props: {
      showSelect: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '标题',
      },
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
      keyString: {
        type: String,
        default: 'list',
      },
    },
    methods: {
      close() {
        this.$emit('cancel');
      },
      bindChange(e) {
        this.selectValue = e.detail.value;
      },
      confirm() {
        this.$emit('confirm', this.selectValue);
      },
    },
  };
</script>

<template>
  <su-popup :show="showSelect" :backgroundColor="'transparent'" @close="close">
    <view class="flex align-center flex-column"
          style="width: 750rpx;height: 845rpx;border-radius: 24rpx 24rpx 0rpx 0rpx;background: #ffffff;"
    >
      <view class="select-popup flex flex-column align-center" style="width: 100%;height: 100%;">
        <view style="width: 750rpx;padding: 15rpx 0" class="flex align-center justify-between">
          <view class="sure_cancel flex align-center justify-center" @click.stop="close">取消</view>
          <view class="title_content_solarDate">{{ title }}</view>
          <view class="sure_confirm flex align-center justify-center" @click.stop="confirm">确定</view>
        </view>
        <picker-view class="flex-sub wh_750" :mask-style="'background:transparent;'"
                     :indicator-style="indicatorStyle"
                     :value="selectValue"
                     @change="bindChange"
        >
          <picker-view-column v-for="(item, index) in list" :key="index">
            <view class="item flex align-center justify-center" v-for="(item2, index2) in item[keyString]"
                  :key="index2">
              {{ item2.edu_name }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </su-popup>
</template>

<style scoped lang="scss">
  .select-popup {
    margin: 0 auto;
    background: url($uni-bg-url-sq + '/index/timePopupBackground.png') no-repeat;
    background-size: 100% 100%;
  }

  .sure_cancel {
    width: 114rpx;
    height: 50rpx;
    background: #BABABA;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    margin-left: 25rpx;
  }

  .sure_confirm {
    width: 114rpx;
    height: 50rpx;
    background: #FF4206;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
    margin-right: 25rpx;
  }

  .title_content_solarDate {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #4B4B4B;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
  }
</style>